<script setup>
    import Item from '../components/Item.vue'
    import useTodo from '../composables/useTodo.js'
    import Add from '../components/Add.vue'
    import Sort from '../components/Sort.vue'
    import gsap from 'gsap'
    const {todos,load} = useTodo();
    load();
    const beforeEnter = (el) => {
      gsap.set(el,{
        opacity: 0
      })
    };

    const enter = (el,done) => {
      gsap.to(el,{
        opacity: 1,
        duration:.6,
        delay:el.dataset.index * 0.3,
        onComplete:done
      })
    };
</script>

<template>
  <!-- <div>{{todos}}</div> -->
  <div class="form">
    <add class="add" />
    <sort />
  </div>
  <div class="todo">
    <!-- transition-group控制一组成员列表，前提每个成员必须要有key -->
    <transition-group appear name="todo" @before-enter="beforeEnter" @enter="enter">
      <item v-for="(todo,index) of todos" :key="todo.id" class="item" :todo="todo" :data-index="index" />
    </transition-group>
  </div>
</template>

<style lang="scss" scoped>
  .todo-leave-to {
    opacity: 0;
    transform: scale(0);
  }
  .todo-leave-active {
    transition: 1s ease;
    position: absolute;
  }
  // 观察到前面元素的消失，后面的元素产生关联的动作
  .todo-move{
    transition: all 1s ease;
  }
  div.form{
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    padding: 20px;
    .add{
      flex: 1;
    }
  }
  div.todo{
    width:100%;
    padding:20px;
    display:flex;
    flex-direction:column;
    position: relative;
    .item{
      margin-bottom: 10px;
    }
  }
</style>